<template>
  <view class="address">
    <view class="address-des-wrap">
      <view
        class="address-des-info"
        v-for="(item, index) in addressList"
        :key="index"
        @tap="jumpHandler(item)"
      >
        <image v-if="item.image" :src="item.image" />
        <text>{{ item.addressName }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        {
          addressId: 1,
          addressName: "丰收广场",
          image: require("@/assets/common/tz.jpg"),
        },
        {
          addressId: 2,
          addressName: "望仙阁",
          image: require("@/assets/common/wxg.jpg"),
        },
        {
          addressId: 3,
          addressName: "古驿站",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    jumpHandler(val) {
      this.$Router.push({
        name: "scene",
        query: {
          id: val.addressId,
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: #2f3542;
}
</style>
<style lang="scss" scoped>
.address {
  margin-top: 40rpx;
  .address-des-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .address-des-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      font-size: 36rpx;
      color: #333333;
      padding: 34rpx 30rpx;
      margin: 56rpx 0;
      width: 80%;
      border-radius: 10rpx;
      font-weight: 600;
      image {
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
